<template>
  <div class="main-content">
    <div style="height: 60px; background-color: #C566F6FF"></div>
    <div style="display: flex">
      <div class="left"/>
      <div style="width: 66%; background-color: white; ">
        <div style="color: #FE0137FF; margin: 15px 0 15px 18px; font-weight: bold; font-size: 16px">主题市场</div>
        <div style="display: flex; margin: 0 25px; height: 550px">
          <div style="flex: 2">
            <div style="display: flex; color: #666666FF; margin: 14px 0" v-for="item in typeList">
              <img :src="item.img" alt="" style="height: 20px; width: 20px">
              <div style="margin-left: 10px; font-size: 14px">{{ item.name }}</div>
            </div>
          </div>
          <div style="flex: 5; margin-top: 15px">
            <div>
              <el-carousel height="300px" style="border-radius: 10px">
                <el-carousel-item v-for="(item,i) in carousel_top" :key="i">
                  <img :src="item" alt="" style="width: 100%; height: 300px; border-radius: 10px">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div style="margin-top: 30px; display: flex">
              <div style="flex: 1">
                <el-carousel height="300px" style="border-radius: 10px">
                  <el-carousel-item v-for="(item,i) in carousel_left" :key="i">
                    <img :src="item" alt="" style="width: 100%; height: 200px; border-radius: 10px">
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div style="flex: 1; margin-left: 5px">
                <el-carousel height="300px" style="border-radius: 10px">
                  <el-carousel-item v-for="(item,i) in carousel_right" :key="i">
                    <img :src="item" alt="" style="width: 100%; height: 200px; border-radius: 10px">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
          <div style="flex: 3; background-color: #F3F3F3FF; margin-top: 15px; margin-left: 15px; border-radius: 10px">
            <div style="text-align: center; margin-top: 30px">
              <img src="@/assets/images/profile.jpg" alt="" style="width: 80px; height: 80px; border-radius: 50%">
              <div style="margin-top: 10px">Hi，张三</div>
            </div>
            <div style="margin-top: 20px; padding: 0 15px">
              <img src="@/assets/images/shop/right.png" alt="" style="height: 150px; width: 100%; border-radius: 20px">
            </div>
            <div
              style="margin: 20px 10px 10px 10px; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
              <i class="el-icon-bell"></i>
              <span style="font-weight: bold">公告</span>
              <span style="color: #666666;">：{{ top }}</span>
            </div>
            <div style="display: flex; margin-top: 50px">
              <div style="flex: 1; text-align: center"
                   v-for="item in myList" :key="item.path"
                   @click="$router.push(item.path)">
                <img :src="item.img" alt="" style="height: 25px; width: 25px">
                <div>{{ item.text }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="text">
          热卖商品
        </div>
        <div style="margin: 0 20px;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap">
          <div v-for="item in goodsList" :key="item.id"
               @click="$router.push({path: '/goods/detail?id='+item.id})"
               style="width: 175px;height: 230px;">
            <image-preview :src="item.img" style="width: 100%;height: 175px;"/>
            <div class="line1">{{ item.name }}</div>
            <div>{{ item.price }}/{{ item.unit }}</div>
          </div>
        </div>
      </div>
      <div class="right"/>
    </div>

  </div>
</template>

<script>
import {listType} from "@/api/project/type";
import {listGoods} from "@/api/project/goods";

export default {
  data() {
    return {
      top: null,
      myList: [
        {path: '/cart', text: '购物车', img: require('@/assets/images/shop/购物车.png')},
        {path: '/address', text: '我的地址', img: require('@/assets/images/shop/店铺.png')},
        {path: '/collect', text: '我的收藏', img: require('@/assets/images/shop/收藏.png')},
        {path: '/orders', text: '我的订单', img: require('@/assets/images/shop/订单.png')},
      ],
      typeList: [],
      goodsList: [],
      carousel_top: [
        require('@/assets/images/shop/carousel-1.png'),
        require('@/assets/images/shop/carousel-2.png'),
        require('@/assets/images/shop/carousel-9.png'),
      ],
      carousel_left: [
        require('@/assets/images/shop/carousel-3.png'),
        require('@/assets/images/shop/carousel-4.png'),
        require('@/assets/images/shop/carousel-5.png'),
      ],
      carousel_right: [
        require('@/assets/images/shop/carousel-6.png'),
        require('@/assets/images/shop/carousel-7.png'),
        require('@/assets/images/shop/carousel-8.png'),
      ],
    }
  },
  created() {
    listType({pageSize: 20}).then(res => this.typeList = res.rows)
    listGoods({pageSize: 20}).then(res => this.goodsList = res.rows)
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {}
}
</script>

<style scoped>
.main-content {
  /*overflow: hidden;*/
  background-size: 100%;
  background-image: url('../../../assets/images/shop/img.png');
}

.left {
  width: 17%;
  background-repeat: no-repeat;
  background-image: url('../../../assets/images/shop/left-img.png');
}

.right {
  width: 17%;
  background-repeat: no-repeat;
  background-image: url('../../../assets/images/shop/right-img.png')
}

.text {
  margin: 30px;
  padding: 10px;
  width: 150px;
  text-align: center;
  border-radius: 40px;
  color: white;
  background-color: green;
  font: bolder 20px normal
}
</style>
